<template>
  <v-dialog
    id="dialog"
    v-model="settings"
    :fullscreen="$vuetify.breakpoint.xsOnly"
    hide-overlay
    max-width="600px"
    persistent
  >
  <Twofactorcode></Twofactorcode>
    <v-card>
      <v-toolbar dark color="primary">
        <v-btn icon dark @click="Close_Settings">
          <v-icon>mdi-close</v-icon>
        </v-btn>
        <v-toolbar-title>{{$t("message.settings")}}</v-toolbar-title>
      </v-toolbar>
      <v-container>
        <v-row fulid>
          <v-col cols="12">
            <v-hover v-slot:default="{ hover }">
              <v-card :elevation="hover ? 15 : 1" :color="autodarkmodecard" class="pa-4">
                <v-row>
                  <v-col cols="2">
                    <div class="text-center mt-4">
                      <v-icon color="white large" x-large>mdi-theme-light-dark</v-icon>
                    </div>
                  </v-col>
                  <v-col cols="8">
                    <div class="text-center mt-4 headline font-weight-bold">
                      <p class="white--text text-center .subtitle-2">{{$t("message.autodark")}}</p>
                    </div>
                  </v-col>

                  <v-col cols="2">
                    <div class="text-center mt-4">
                      <v-switch v-model="autodarkmodeswitcher" color="white" ></v-switch>
                    </div>
                  </v-col>
                </v-row>
                <v-expand-transition>
                  <div v-show="autodarkmodeswitcher">
                    <v-divider></v-divider>
                    <v-row>
                      <v-col cols="11" sm="5">
                        <v-dialog
                          ref="dialog"
                          v-model="starttimedialog"
                          :return-value.sync="starttime"
                          persistent
                          width="290px"
                        >
                          <template v-slot:activator="{ on }">
                            <v-text-field
                            color="white"
                              v-model="starttime"
                              :label="$t('message.starttime')"
                              prepend-icon="mdi-access_time"
                              readonly
                              v-on="on"
                              dark
                            ></v-text-field>
                          </template>
                          <v-time-picker v-if="starttimedialog" v-model="starttime" full-width scrollable ampm-in-title >
                            <v-spacer></v-spacer>
                            <v-btn text color="primary" @click="starttimedialog = false">Cancel</v-btn>
                            <v-btn text color="primary" @click="$refs.dialog.save(starttime)">OK</v-btn>
                          </v-time-picker>
                        </v-dialog>
                      </v-col>
                      <v-col cols="11" sm="5">
                        <v-dialog
                          ref="dialog2"
                          v-model="endtimedialog"
                          :return-value.sync="endtime"
                          persistent
                          width="290px"
                          
                        >
                          <template v-slot:activator="{ on }">
                            <v-text-field
                            color="white"
                              v-model="endtime"
                              :label="$t('message.endtime')"
                              prepend-icon="mdi-access_time"
                              readonly
                              v-on="on"
                              dark
                            ></v-text-field>
                          </template>
                          <v-time-picker v-if="endtimedialog" v-model="endtime" full-width scrollable ampm-in-title >
                            <v-spacer></v-spacer>
                            <v-btn text color="primary" @click="endtimedialog = false">Cancel</v-btn>
                            <v-btn text color="primary" @click="$refs.dialog2.save(endtime)">OK</v-btn>
                          </v-time-picker>
                        </v-dialog>
                      </v-col>
                    </v-row>
                  </div>
                </v-expand-transition>
              </v-card>
            </v-hover>
          </v-col>
           <v-col cols="12" v-if="this.$cookies.isKey('user')">
            <v-hover v-slot:default="{ hover }">
              <v-card :elevation="hover ? 15 : 1" :color="twofactorcodecard" class="pa-4" @click="twofactorcodesettings">
                <v-row>
                  <v-col cols="2">
                    <div class="text-center mt-4">
                      <v-icon color="white large" x-large>mdi-cellphone-key</v-icon>
                    </div>
                  </v-col>
                  <v-col cols="8">
                    <div class="text-center mt-4 headline font-weight-bold">
                      <p class="white--text text-center .subtitle-2">{{$t("message.twofactorcode")}}</p>
                    </div>
                  </v-col>

                  <v-col cols="2">
                    <div class="text-center mt-4">
                      <v-switch v-model="twofactorcodeswitcher" color="white" disabled></v-switch>
                    </div>
                  </v-col>
                </v-row>
                <v-expand-transition>
                  <div v-show="twofactorcodeswitcher">
                      
                  </div>
                </v-expand-transition>
              </v-card>
            </v-hover>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-dialog>
</template>

<script>
import Twofactorcode from './Twofactorcode.vue'
export default {
  data: () => ({
    userinfo:'',
    endtime:null,
    endtimedialog:false,
    starttime:null,
    starttimedialog:false,
    autodarkmodeswitcher:false,
    twofactorcodeswitcher:true,
  }),
  methods: {
    Close_Settings() {
      this.$store.commit("close_settings");
    },
    twofactorcodesettings(){
      this.$store.commit('change_twofactorcodesettings',true);
    }
  },
  computed: {
    settings: {
      get: function() {
        return this.$store.state.settings;
      }
    },
    autodarkmodecard: {
      get: function() {
        if (this.autodarkmodeswitcher) {
          return "blue darken-4";
        } else {
          return "grey";
        }
      }
    },
    twofactorcodecard: {
      get: function() {
        if (this.twofactorcodeswitcher) {
          return "red darken-4";
        } else {
          return "grey";
        }
      }
    },
    twofactorcodeswitcher:{
      get: function(){
        //console.log(this.$cookies.get("twofactorcode"));
        return this.$cookies.get("twofactorcode")
      }
    }
  },
  watch:{
      starttime:function(){
          this.$cookies.set("Starttime", this.starttime, Infinity);
      },
      endtime:function(){
          this.$cookies.set("Endtime",this.endtime,Infinity);
      },
    autodarkmodeswitcher:function(){
        this.$cookies.set("autodarkmode", this.autodarkmodeswitcher,Infinity);
    },
    twofactorcodeswitcher:function(){

      
      
      this.$store.commit('change_twofactorcode',this.twofactorcodeswitcher);
    }
  },
  mounted() {
      this.endtime=this.$cookies.get("Endtime");
      this.starttime=this.$cookies.get("Starttime");
      this.twofactorcodeswitcher=this.$store.state.twofactorcode;
        if(this.$cookies.get("autodarkmode")=="true"){
            this.autodarkmodeswitcher=true;
        }
      if(this.$cookies.isKey("user")){
      var loginBean = new URLSearchParams();
      loginBean.append("fetchUserBean.uid", String(this.$cookies.get("user"))); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/myfetchuser",
        data: loginBean
      })
        .then(response => {
          this.userinfo=JSON.parse(response.data);
          
if(this.userinfo.tfkey==null){

        this.twofactorcodeswitcher=false;
        this.$cookies.set("twofactorcode",false,Infinity);
      }else{
        this.twofactorcodeswitcher=true;
        this.$cookies.set("twofactorcode",true,Infinity);
      }
        })
        .catch(function(error) {
          console.log(error);
        });
      }
  },
  components:{
    Twofactorcode,
  }
};
</script>

<style>
</style>